<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        #map {
            height: 400px;
            width: 100%;
        }
    </style>
    <!--  1.0 导入地图js -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=SeUxB6PBUamb8yEP3e463NCIivu7PO70">
    </script>


</head>

<body>
    <div id="map"></div>

    <script>
        // // 2.0 初始化地图到一个容器中-  (单纯的创建一个地图在dom元素中演示)
        // var map = new BMap.Map('map');
        // // 创建地图实例  
        // var point = new BMap.Point(116.404, 39.915);
        // // 创建点坐标  
        // map.centerAndZoom(point, 15);


        // 根据地址获取到经纬度对象，再调用centerAndZoom渲染出地图（广州市）

        var map = new BMap.Map('map');
        // 创建地图实例  
        // 创建地址解析器实例
        var myGeo = new BMap.Geocoder();
        // 将地址解析结果显示在地图上,并调整地图视野
        myGeo.getPoint("广州市天河区珠吉路58号", function (point) {
            if (point) {
                map.centerAndZoom(point, 13); // 参数1：表示地图中心点，参数2：地图缩放比例
                // 给地址在地图上添加一个标记点
                map.addOverlay(new BMap.Marker(point));

                // 添加一个平移缩放控件到地图上
                map.addControl(new BMap.NavigationControl());
                map.addControl(new BMap.ScaleControl());
                // console.log(point);

            } else {
                alert("您选择地址没有解析到结果!");
            }
        }, "广州市");

    </script>
</body>

</html>